<template>
  <div class="container">
    <!-- <el-upload
      class="upload-demo"
      action="http://127.0.0.1:8899/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :headers="{'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Ind1emhpaGFuZyIsInJvbGVLZXlzIjpbImFkbWluIiwidGVzdCJdLCJpc1JlZnJlc2hUb2tlbiI6ZmFsc2UsImV4cCI6MTU5Nzc2NTYzOCwiaXNzIjoid3V6aGloYW5nIn0.-SeZrCvglY2mdygdFivFzuXDCoKxgejJj3o-maV5S6o'}"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button
        size="small"
        type="primary"
      >点击上传</el-button>
      <div
        slot="tip"
        class="el-upload__tip"
      >只能上传jpg/png文件，且不超过500kb</div>
    </el-upload> -->
    <el-upload
      ref="upload"
      class="upload-demo"
      action="http://127.0.0.1:8899/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button
        slot="trigger"
        size="small"
        type="primary"
      >选取文件</el-button>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="submitUpload"
      >上传到服务器</el-button>
      <div
        slot="tip"
        class="el-upload__tip"
      >只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
      path: 'ws://localhost:8899/ws',
      socket: ''
    }
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    init: function() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function() {
      console.log('socket连接成功')
    },
    error: function() {
      console.log('连接错误')
    },
    getMessage: function(msg) {
      // console.log(msg.data)
    },
    send: function() {
      // this.socket.send(params)
    },
    close: function() {
      console.log('socket已经关闭')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/common.scss";
</style>
